<template>
  <div class="detail">
    <div>
      <!-- 导航栏 -->
      <van-nav-bar
        :title="hospital.name"
        left-text="返回"
        right-text="医院介绍"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>

    <div class="content">
      <!-- 科室导航 -->
      <div class="department">
        <div class="department_navigation">
          <div class="item" :class="{ bgc: department==item }" v-for="(item,index) in departments" :key="index" @click="onChange(item)">
            {{ item }}
          </div>
        </div>

        <!-- 医生排班 -->
        <div v-if="department" class="department_scheduling">
          <div class="time">
            <div :class="{active: item.date == day}" class="it" v-for="item in time" :key="item.date" @click="timeChange(item)">
              <div>{{ item.day }}</div>
              <div>{{ item.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 排班 -->
    <div class="scheduling" v-if="department">
      <!-- 医生单元格 -->
      <div class="cell">
        <!-- 照片 -->
        <div class="photo">
          <van-image
            width="60px"
            height="60px"
            round
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <!-- 信息 -->
        <div class="info">
          <div class="top">
            <div class="name">王优
              <div class="title"><i class="iconfont">&#xe69f;</i>主任医师</div>
            </div>
            <div class="price">￥22</div>
          </div>
          <div class="middle van-multi-ellipsis--l2">
            擅长各型糖尿病及并发症、甲状腺、肾上腺、垂体疾病等各种内分泌疾病的诊治；尤其在肥胖治疗，1 型糖尿病及胰岛功能差的2 型糖尿病用胰岛素泵及动态血糖进行的“双C”、“3C”治疗上有较高造诣；在妊娠糖尿病及妊娠甲状腺疾病上也有很多临床经验。
          </div>
          <div class="bottom">
            <div class="am" @click="goNum()">
              <van-tag plain type="primary">{{ date.date }} 上午：1 </van-tag>
            </div>
            <div class="pm">
              <van-tag plain type="primary">{{ date.date }} 下午：1 </van-tag>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <!-- 照片 -->
        <div class="photo">
          <van-image
            width="60px"
            height="60px"
            round
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <!-- 信息 -->
        <div class="info">
          <div class="top">
            <div class="name">王优
              <div class="title"><i class="iconfont">&#xe69f;</i>主任医师</div>
            </div>
            <div class="price">￥22</div>
          </div>
          <div class="middle van-multi-ellipsis--l2">
            擅长各型糖尿病及并发症、甲状腺、肾上腺、垂体疾病等各种内分泌疾病的诊治；尤其在肥胖治疗，1 型糖尿病及胰岛功能差的2 型糖尿病用胰岛素泵及动态血糖进行的“双C”、“3C”治疗上有较高造诣；在妊娠糖尿病及妊娠甲状腺疾病上也有很多临床经验。
          </div>
          <div class="bottom">
            <div class="am">
              <van-tag plain type="primary">{{ date.date }} 上午：1 </van-tag>
            </div>
            <div class="pm">
              <van-tag plain type="primary">{{ date.date }} 下午：1 </van-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂无排班信息，请选择详细科室" v-else />


  </div>
</template>

<script>
export default {
  data(){
    return{
      hospital: this.$route.query.hospital,
      activeKey: 0,
      department: this.$route.query.department || '',
      departments: [
        '内分泌科',
        '神经内科',
        '心血管内科',
        '肾内科',
        '眼科'
      ],
      time: [
        {
          date: '02-24',
          day: '周五',
        },
        {
          date: '02-25',
          day: '周六',
        },
        {
          date: '02-26',
          day: '周日',
        },
        {
          date: '02-27',
          day: '周一',
        },
      ],
      date: this.$route.query.date || {
        date: '02-24',
        day: '周五',
      },
      day: this.$route.query.day || '02-24'
    }
  },
  created(){
    const query = this.$route.query
    if(query.name){
      this.hospital = query
    }else{

    }
  },
  methods:{
    onClickLeft() {
      // Toast('返回');
      this.$router.push({
        path: '/manager/appointment'
      })
    },
    onClickRight(){
      this.$router.push({
        path: '/manager/information',
        query: this.hospital
      })
    },

    onChange(item) {
      console.log(item)
      this.department = item
    },
    timeChange(item){
      this.day = item.date
      this.date = item
    },
    goNum(){
      this.$router.push({
        path: '/manager/numDetail',
        query: {
          hospital: this.hospital,
          department: this.department,
          day: this.day,
          date: this.date
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detail{
  padding-bottom: 60px;
  .content{
    padding: 0 10px;
    .department{
      .department_navigation::after{
        height: 0;
        width: 30%;
        content: "";
      }
      .department_navigation{
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .item{
          width: 30%;
          text-align: center;
          border: 1px solid #e7e7e7;
          padding: 12px 0;
          border-radius: 5px;
          background-color: #f4f4f4;
          margin: 5px 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .bgc{
          background-color: @red;
        }
      }
      .department_scheduling{
        margin-top: 40px;
        .time{
          display: flex;
          .active{
            background-color: @blue;
            color: #fff;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
          }
          .it{
            width: 15%;
            // background-color: #e7e7e7;
            padding: 5px;
            // margin: 2px;
            text-align: center;
          }
        }
      }
      .department_scheduling::after{
        content: '';
        width: 100%;
        height: 2px;
        display:block;
        background: @blue;
      }
    }
  }
  .scheduling{
    padding: 10px;
    .cell{
      display: flex;
      margin-top: 20px;
      border-bottom: 1px solid #f4f4f4;
      padding-bottom: 10px;
      .photo{
        width: 15%;
        padding:0 15px 0 10px;
      }
      .info{
        width: 80%;
        .top{
          display: flex;
          .name{
            width: 80%;
            font-size: 20px;
            .title{
              display: inline-block;
              font-size: 12px;
              color: #ff8e1d;
              i{
                position: relative;
                top: 2px;
              }
            }
          }
          .price{
            padding-right: 8px;
            width: 20%;
            text-align: right;
            color: #464646;
          }
        }
        .middle{
          font-size: 14px;
          margin: 8px 0;
          color: #666666;
        }
        .bottom{
          display: flex;
          .van-tag{
            padding: 2px 5px;
          }
          .am{
            flex: 1;
          }
          .pm{
            flex: 1;
            text-align: right;
            margin-right: 6px;
          }
        }
      }
    }
  }
}

</style>
